<template>
 <div>
   <div class="container">
    <div class="handle-box" v-if="display">
      <p>您还没有创建班级，请先<a href="javascript:(0)" @click="CreateClass">创建班级</a></p>
    </div>
      <el-table :data="data"  id="out-table" border style="width: 100%">
          <el-table-column prop="teachClassId" label="班级ID" widht="100"></el-table-column>
          <el-table-column prop="name" label="班级名称" widht="100"></el-table-column>
          <el-table-column prop="bookName" v-model="bookName" label="课程" width="180">
            <template slot-scope="scope">
              <p>绘本语言课</p>
            </template>
          </el-table-column>
          <el-table-column prop="" label="老师" width="230" >
            <template slot-scope="scope">
              <p>授课教师：{{scope.row.teacherNameList[0]}}{{scope.row.teacherNameList[1]}}{{scope.row.teacherNameList[2]}}</p>
              <p>班主任(助教)：{{scope.row.organizationUserName}}</p>
            </template>
          </el-table-column>  
          <el-table-column prop="" label="开课时间／结课时间">
            <template slot-scope="scope">
              <p>{{scope.row.lessionBeginTime===undefined?"- -":scope.row.lessionBeginTime}}</p> 
              <p>{{scope.row.lessionEndTime===undefined?"- -":scope.row.lessionEndTime}}</p>
            </template> 
          </el-table-column>
          <el-table-column prop="studentCount" label="学员数"></el-table-column>
          <el-table-column prop="functionClassifyName" label="开课次数">
            <template slot-scope="scope">
              <span>{{scope.row.beginLessionCount}}</span> / 
              <span>{{scope.row.totalLessionCount}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                  <el-button type="text" size="medium" @click="RowCourse(scope.row)">
                    {{scope.row.planLessionStatus==0?"排课":"查看课表"}}
                  </el-button>
              </template>
          </el-table-column>
      </el-table>
      <div class="pagination">
          <el-pagination @current-change="handleCurrentChange"
                          layout="prev, pager, next"
                          :total="pageData">
          </el-pagination>
      </div>
   </div>
 </div>
</template>
<script>
export default {
  name: "basetable",
  data() {
    return {
      url: "",
      tableData: [],
      pageData: undefined,
      fengye: 1,
      bookName:"绘本语言课",
    };
  },
  created() {
    this.getData();
    this.LoginName();
    this.Hiding();
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    }
  },
  methods: {
    // 判断提示语显示隐藏
    Hiding(){
      if(this.tableData == {}){
        this.display = true
      }else{
        this.display = false
      }
    },
    // 创建班级
    CreateClass() {
      this.$router.push({ path: "/ClassAdmin", params: {id: "1"}});
    },
    // 分页导航
    handleCurrentChange(val) {
      this.fengye = val;
      this.getData();
    },
    // 获取 机构id 信息
    LoginName() {
      this.url = "/api/user/xzs/organizationManager.login";
      this.$axios({
        url: this.url,
        method: "post",
        data: {}
      }).then(res => {
          this.loginname=res.data.data.name
          this.organizationIds=res.data.data.organizationIds
          var arr= this.organizationIds[1];
      }).catch(err=>{
        
      });
    },
    // 获取后台数据
    getData() {
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.url = "/api/user/xzs/teachClass.list.get"; 
      this.$axios({
        url:this.url,
        method:"post",
        data:{  
          organizationId:organizationId,
          pageNum: that.fengye,
          pageSize: "10",
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
            }
            return ret;
          }     
        ]
      }).then(res =>{
        this.tableData=res.data.data.pageList
        this.pageData = res.data.data.total
        this.tableData.map(function (item) {
           item.lessionBeginTime ? item.lessionBeginTime=that.timestampToTime(item.lessionBeginTime) :[]||{};
           item.lessionEndTime ? item.lessionEndTime=that.timestampToTime(item.lessionEndTime): [] || {};
        });
      }).catch(err =>{
        console.log(err);
      })
    },
    //时间戳转换
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = String(date.getMinutes()).padStart(2, "0");
      return Y + M + D + h + m;
    },
    // 排课
    RowCourse(row){
      this.$router.push({ path: "/home/RowCourse?id="+row.teachClassId+"&name="+row.name+"&teacherId="+row.organizationUserId+"&status="+row.planLessionStatus, params: { id: "1" } });
      
    }
  }
};
</script>
<style>
.handle-box {
  margin-bottom: 20px;
  padding-top: 30px;
  padding-left: 10px;
  height: 50px;
  border-radius: 5px;
  background: #f4fafa;
}
</style>
